<template>
	<view>
		<map id="map" scale="18" @controltap="controltap" :markers="markers" show-location class="map-width"
			:longitude="longitude" :latitude="latitude"></map>
		<view class="rider">配送距离：{{distance}}米</view>
		<view class="rider">骑手姓名：{{transporterName}}</view>
		<view class="rider" @tap="call">骑手联系方式：{{transporterPhone}}</view>
	</view>
</template>

<script>
	var app = getApp().globalData;

	export default {
		data() {
			return {
				markers: [],
				latitude: '',
				longitude: '',
				transporterName: '',
				transporterPhone: '',
				distance: '',
				id: 0,
			};
		},

		onReady: function(e) {
			// 使用 uni.createMapContext 获取 map 上下文 
			this.mapCtx = uni.createMapContext('myMap');
		},
		onLoad: function(options) {
			var that = this;
			var order_no = options.order_no;
			getApp().globalData.sendRequest({
				url: "/Order/rider",
				type: "post",
				data: {
					order_no: order_no,
				},
				success: function(res) {
					if (res.status == 1) {
						that.setData({
							id: 1,
							latitude: res.transporterLat,
							longitude: res.transporterLng,
							transporterName: res.transporterName,
							transporterPhone: res.transporterPhone,
							distance: res.distance,
							markers: [{
								iconPath: "/static/images/rider.png",
								latitude: res.transporterLat,
								longitude: res.transporterLng,
								width: 25,
								height: 48,
								callout: {
									color: "#red",
									fontSize: "16",
									borderRadius: "10",
									bgColor: "#ffffff",
									padding: "10"
								}
							}]
						});
					} else {
						uni.showToast({
							title: res.msg
						});
					}
				}
			});
		},
		methods: {
			call: function() {
				var phone = this.transporterPhone;

				if (!phone) {
					uni.showToast({
						title: '手机号错误',
						icon: 'nnone'
					});
					return;
				}

				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	};
</script>
<style>
	@import "./rider.css";
</style>
